<template>
    <div style="width: 90%;margin-left: 5%;">
      <h2 style="color: grey;margin-top: 20px">数据展示中心</h2><br>
      <div style="width: 34.8%;height: 399px;background-color: #FFFFFF;margin-top: 10px;border: 1px solid #F5F5F5;float: left">
        <h4 style="color: grey">用户占比统计</h4><br>
        <div id="main" style="width: 100%;height: 90%;"></div>
      </div>
      <div style="width: 30%;height: 399px;background-color: #FFFFFF;margin-top: 10px;border: 1px solid #F5F5F5;float: left">
        <h4 style="color: grey">学生就业情况统计</h4><br>
        <div id="EmploymentProportionData" style="width: 100%;height: 90%;"></div>
      </div>
      <div style="width: 34.8%;height: 399px;background-color: #FFFFFF;margin-top: 10px;border: 1px solid #F5F5F5;float: right">
        <h4 style="color: grey">用户数量统计</h4><br>
        <div id="databar" style="width: 100%;height: 90%;"></div>
      </div>

      <div style="width: 34.8%;height: 399px;background-color: #FFFFFF;margin-top: 10px;border: 1px solid #F5F5F5;float: left">
        <h4 style="color: grey">学生用户学院占比统计</h4><br>
        <div id="collegeProportion" style="width: 100%;height: 90%;"></div>
      </div>
      <div style="width: 30%;height: 399px;background-color: #FFFFFF;margin-top: 10px;border: 1px solid #F5F5F5;float: left">
        <h4 style="color: grey">学生学院已就业占比统计</h4><br>
        <div id="collegeJobProportion" style="width: 100%;height: 90%;"></div>
      </div>
      <div style="width: 34.8%;height: 399px;background-color: #FFFFFF;margin-top: 10px;border: 1px solid #F5F5F5;float: right">
        <h4 style="color: grey">学生学院考研升学占比统计</h4><br>
        <div id="collegeFurtherProportion" style="width: 100%;height: 90%;"></div>
      </div>


      <div style="width: 49.8%;height: 399px;background-color: #FFFFFF;margin-top: 10px;border: 1px solid #F5F5F5;float: left">
        <h4 style="color: grey">各个学院就业情况排名</h4><br>
        <div id="employmentRanking" style="width: 100%;height: 90%;"></div>
      </div>
      <div style="width: 49.8%;height: 399px;background-color: #FFFFFF;margin-top: 10px;border: 1px solid #F5F5F5;float: right">
        <h4 style="color: grey">就业地区人数排名</h4><br>
        <div id="employmentAddress" style="width: 100%;height: 90%;"></div>
      </div>

    </div>
</template>

<style>
    body {
        background-color: #F5F5F5;
    }
</style>

<script>
  export default {
    name: 'datadriver',
    data () {
      return {
        charts: '',
        opinion:'',
        opinionData:'',
        barData:'',
        employmentProportionData:'',
        employmentProportionopinion:'',
        employmentRankingXx:'',
        employmentRankingYx:'',
        employmentAddressXx:'',
        employmentAddressYx:'',
        collegeProportionData:'',
        collegeProportionopinion:'',
        collegeJobProportionData:'',
        collegeJobProportionopinion:'',
        collegeFurtherProportionData:'',
        collegeFurtherProportionopinion:''
      }
    },
    methods:{
      drawPie(id){
        this.charts = this.$echarts.init(document.getElementById(id))
        this.charts.setOption({
          tooltip: {
            trigger: 'item',
            formatter: '{a}<br/>{b}:{c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            data:this.opinion
          },
          series: [
            {
              name:'用户角色占比',
              type:'pie',
              radius:['50%','70%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '30',
                    fontWeight: 'blod'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data:this.opinionData
            }
          ]
        })
      },

      drawBar(id){
        this.charts = this.$echarts.init(document.getElementById(id))
        this.charts.setOption({
          color: ['#6495ED'],
          title: {
            text: ''
          },
          tooltip: {},
          xAxis: {
            data: this.opinion
          },
          yAxis: {},
          series: [{
            name: '用户数量',
            type: 'bar',
            data: this.barData,
          }]
        })
      },


      SelectcollegeFurtherProportionPei(){

        this.$axios({
          url: `/api/manOperat/SelectcollegeFurtherProportionPei/`,
          method: 'get',
        }).then(response => {  // 请求成功

          this.collegeFurtherProportionData =  response.data;
          var collegeFurtherProportionlist = [];
          for(var i= 0 ; i<response.data.length;i++){
            collegeFurtherProportionlist.push(response.data[i].name)
          }
          this.collegeFurtherProportionopinion = collegeFurtherProportionlist;

          this.collegeFurtherProportionPei('collegeFurtherProportion');
        }).catch(error => {  // 请求失败

        });

      },


      collegeFurtherProportionPei(id){
        this.charts = this.$echarts.init(document.getElementById(id))
        this.charts.setOption({
          tooltip: {
            trigger: 'item',
            formatter: '{a}<br/>{b}:{c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            data:this.collegeFurtherProportionopinion
          },
          series: [
            {
              name:'考研升学占比统计',
              type:'pie',
              radius:['50%','70%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '30',
                    fontWeight: 'blod'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data:this.collegeFurtherProportionData
            }
          ]
        })
      },


      SelectcollegeJobProportionPei(){

        this.$axios({
          url: `/api/manOperat/SelectcollegeJobProportionPei/`,
          method: 'get',
        }).then(response => {  // 请求成功

          this.collegeJobProportionData =  response.data;
          var collegeJobProportionlist = [];
          for(var i= 0 ; i<response.data.length;i++){
            collegeJobProportionlist.push(response.data[i].name)
          }
          this.collegeJobProportionopinion = collegeJobProportionlist;

          this.collegeJobProportionPei('collegeJobProportion');
        }).catch(error => {  // 请求失败

        });

      },





      collegeJobProportionPei(id){
        this.charts = this.$echarts.init(document.getElementById(id))
        this.charts.setOption({
          tooltip: {
            trigger: 'item',
            formatter: '{a}<br/>{b}:{c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            data:this.collegeJobProportionopinion
          },
          series: [
            {
              name:'学生就业情况统计',
              type:'pie',
              radius:['50%','70%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '30',
                    fontWeight: 'blod'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data:this.collegeJobProportionData
            }
          ]
        })
      },




      SelectcollegeProportionPei(){

        this.$axios({
          url: `/api/manOperat/SelectcollegeProportionPei/`,
          method: 'get',
        }).then(response => {  // 请求成功

          this.collegeProportionData =  response.data;
          var collegeProportionlist = [];
          for(var i= 0 ; i<response.data.length;i++){
            collegeProportionlist.push(response.data[i].name)
          }
          this.collegeProportionopinion = collegeProportionlist;

          this.collegeProportionpei('collegeProportion');
        }).catch(error => {  // 请求失败

        });

      },



      collegeProportionpei(id){
        this.charts = this.$echarts.init(document.getElementById(id))
        this.charts.setOption({
          tooltip: {
            trigger: 'item',
            formatter: '{a}<br/>{b}:{c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            data:this.collegeProportionopinion
          },
          series: [
            {
              name:'学生用户学院占比统计',
              type:'pie',
              radius:['50%','70%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '30',
                    fontWeight: 'blod'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data:this.collegeProportionData
            }
          ]
        })

      },





      EmploymentProportion(id){
        this.charts = this.$echarts.init(document.getElementById(id))
        this.charts.setOption({
          tooltip: {
            trigger: 'item',
            formatter: '{a}<br/>{b}:{c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            data:this.employmentProportionopinion
          },
          series: [
            {
              name:'学生就业情况占比统计',
              type:'pie',
              radius:['50%','80%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '30',
                    fontWeight: 'blod'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data:this.employmentProportionData
            }
          ]
        })
      },







      SelectEmploymentProportion(){
        this.$axios({
          url: `/api/echarts/selectPieChart/`,
          method: 'get',
        }).then(response => {  // 请求成功

          this.employmentProportionData =  response.data;
          var employmentProportionlist = [];
          for(var i= 0 ; i<response.data.length;i++){
            employmentProportionlist.push(response.data[i].name)
          }
          this.employmentProportionopinion = employmentProportionlist;
          this.EmploymentProportion('EmploymentProportionData');
        }).catch(error => {  // 请求失败

        });
      },



      SelectPeidata(){
        this.$axios({
          url: `/api/manOperat/selectPeidata/`,
          method: 'get',
        }).then(response => {  // 请求成功
          this.opinionData =  response.data;
          this.drawPie('main');
          var optionbarname = [];
          var optionbarvalue = [];
          for (var i = 0;i<response.data.length;i++) {
            optionbarname.push(response.data[i].name);
            optionbarvalue.push(response.data[i].value);

          }
          this.opinion = optionbarname;
          this.barData = optionbarvalue;
          this.drawBar('databar');
        }).catch(error => {  // 请求失败

        });
      },



      SelectEmploymentRanking:function(){

        this.$axios({
          url: `/api/manOperat/SelectEmploymentRanking/`,
          method: 'get',
        }).then(response => {  // 请求成功
          var employmentRankingX = [];
          var employmentRankingY = [];
          for (var i= 0;i<response.data.length;i++){
            employmentRankingX.push(response.data[i].name);
            employmentRankingY.push(response.data[i].value);
          }
          this.employmentRankingXx = employmentRankingX;
          this.employmentRankingYx = employmentRankingY;
          this.EmploymentRanking("employmentRanking")
        }).catch(error => {  // 请求失败

        });

      },


      EmploymentRanking:function (id) {
        this.charts = this.$echarts.init(document.getElementById(id))
        this.charts.setOption({
          title: {
            text: '学院就业排名',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },

          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 1]
          },
          yAxis: {
            type: 'category',
            data: this.employmentRankingXx
          },
          series: [
            {
              name: '2020年',
              type: 'bar',
              data:this.employmentRankingYx
            },
          ]
        });


      },

      SelectEmploymentAddress:function(){

        this.$axios({
          url: `/api/manOperat/SelectEmploymentAddress/`,
          method: 'get',
        }).then(response => {  // 请求成功

          var employmentAddressX = [];
          var employmentAddressY = [];
          for (var i= 0;i<response.data.length;i++){
            employmentAddressX.push(response.data[i].name);
            employmentAddressY.push(response.data[i].value);
          }
          this.employmentAddressXx = employmentAddressX;
          this.employmentAddressYx = employmentAddressY;
          this.EmploymentAddress("employmentAddress")
        }).catch(error => {  // 请求失败

        });

      },


      EmploymentAddress:function (id) {
        this.charts = this.$echarts.init(document.getElementById(id))
        this.charts.setOption({
          color: ['#1E90FF'],
          title: {
            text: '地区人数排名',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },

          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 1]
          },
          yAxis: {
            type: 'category',
            data: this.employmentAddressXx
          },
          series: [
            {
              name: '2020年',
              type: 'bar',
              data:this.employmentAddressYx
            },
          ]
        });


      }



    },
    //调用
    created(){
      this.$nextTick(function() {
        this.SelectPeidata();
        this.SelectEmploymentProportion();
        this.SelectEmploymentRanking();
        this.SelectEmploymentAddress();
        this.SelectcollegeProportionPei();
        this.SelectcollegeJobProportionPei();
        this.SelectcollegeFurtherProportionPei();
      })
    }
  }


</script>

<style scoped>
  * {
    margin: 0;
    padding: 0;
    list-style: none;
  }
</style>
